<template>
  <div class="orderwl">
    <ContentBox title="物流信息" @left="back" :fixed="true" titlecolor="#000000">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
    </ContentBox>
    <notice :top="$remToPx('0.88')" class="not"></notice>
    <div class="goods_info">
      <van-image
        width=".96rem"
        height=".96rem"
        :radius="$remToPx(0.08)"
        :src="WLDetail_order.cartInfo && WLDetail_order.cartInfo[0].productInfo &&  WLDetail_order.cartInfo[0].productInfo.image"
      />
      <div class="wx_company">
        <p class="wl_name">{{WLDetail_order.delivery_name}}</p>
        <div class="wl_id"><span>快递单号: </span><span>{{WLDetail_order.delivery_id}}</span></div>
      </div>
    </div>
    <div class="wx_info">
      <van-steps direction="vertical" :active="0" active-color="#FF2E1F">
        <van-step v-for="(item, index) in WX_express" :key="index">
          <h3>{{item.status}}</h3>
          <p>{{item.time}}</p>
        </van-step>
        <!-- <van-step>
          <h3>【城市】物流状态1</h3>
          <p>2016-07-12 12:40</p>
        </van-step>
        <van-step>
          <h3>【城市】物流状态2</h3>
          <p>2016-07-11 10:00</p>
        </van-step>
        <van-step>
          <h3>快件已发货</h3>
          <p>2016-07-10 09:30</p>
        </van-step> -->
      </van-steps>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      WLDetail_order: '',
      WX_express: ''
    }
  },
  methods: {
    getWL () {
      this.$axios.get(`/api/order/express/${this.$route.params.oid}`).then(res => {
        if (res.status === 200) {
          this.WLDetail_order = res.data.order
          this.WX_express = res.data.express.result.list
        }
      })
    },
    back () {
      this.$router.push('/shopOrder?showView=3')
    }
  },
  created () {
    this.getWL()
  }
}
</script>

<style lang="scss">
.orderwl{
  height: 100%;
  background: #f0f0f0;
  padding-top: 1.36rem;
  .not{
    position: fixed;
    top: .88rem;
    left: 0;
    width: 100%;
  }
  .goods_info{
    background: #ffffff;
    border-radius: 0 0 .08rem .08rem;
    margin-bottom: .24rem;
    display: flex;
    padding: .3rem .24rem;
    .wx_company{
      margin-left: .16rem;
      display: flex;
      flex-direction: column;
      font-size: .26rem;
      .wl_name{
        margin-bottom: .2rem;
        color: #f00e0e;
      }
      .wl_id{
        color: #333333;
        span{
          margin-right: .16rem;
        }
      }
    }
  }
  .wx_info{
    border-radius: .08rem;
    overflow: hidden;
    padding: .24rem 0;
    background: #ffffff;
  }
}
</style>
